<template>
	<view class="page">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"></image>
					<view class="avatar-badge">
						<text class="badge-text">在线</text>
					</view>
				</view>
				<view class="user-info">
					<text class="department">{{ userInfo.realName || '用户' }}</text>
					<text class="name">{{ userInfo.username || '未登录' }}</text>
					<text class="email">{{ userInfo.email || 'user@example.com' }}</text>
				</view>
				<view class="user-actions">
					<view class="action-btn" @click="editProfile">
						<uni-icons type="compose" size="18" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- 审批管理 -->
		<view class="menu-section">
			<view class="section-title">审批管理</view>
			<view class="menu-list">
				<view class="menu-item" @click="navigateToApprovalHistory">
					<view class="menu-left">
						<view class="menu-icon history">
							<uni-icons type="list" size="22" color="#fff"></uni-icons>
						</view>
						<text class="menu-text">审批历史</text>
					</view>
					<view class="menu-right">
						<view class="menu-badge" v-if="userInfo.completedCount > 0">{{ userInfo.completedCount }}</view>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 系统设置 -->
		<view class="menu-section">
			<view class="section-title">系统设置</view>
			<view class="menu-list">
				<view class="menu-item" @click="faceRegister">
					<view class="menu-left">
						<view class="menu-icon face">
							<image src="/static/pic/face.png" style="width: 60rpx; height: 60rpx; display: block;" mode="aspectFit"></image>
						</view>
						<text class="menu-text">人脸注册</text>
					</view>
					<view class="menu-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>

				<view class="menu-item" @click="handleLogout">
					<view class="menu-left">
						<view class="menu-icon logout">
							<uni-icons type="loop" size="22" color="#fff"></uni-icons>
						</view>
						<text class="menu-text">退出登录</text>
					</view>
					<view class="menu-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUserInfo, clearAuth } from '@/utils/auth.js'
import { queryUserFlow, queryCompletedTasks, getApprovalStatistics } from '@/api/approval.js'

export default {
	data() {
		return {
			userInfo: {},
			loading: false
		}
	},
	onLoad() {
		this.loadUserInfo()
	},
	onShow() {
		// 每次显示页面时刷新统计数据，确保与首页同步
		if (this.userInfo.username) {
			this.loadStats()
		}
	},
	methods: {
		loadUserInfo() {
			this.userInfo = getUserInfo() || {}
			// 添加统计信息
			this.userInfo.todoCount = this.userInfo.todoCount || 0
			this.userInfo.messageCount = this.userInfo.messageCount || 0
			this.userInfo.notificationCount = this.userInfo.notificationCount || 0
			
			// 如果没有统计数据，加载示例数据
			this.loadStats()
		},
		
		// 加载统计数据
		async loadStats() {
			try {
				// 并行获取待办任务和已完成任务数据
				const [pendingRes, completedRes, statsRes] = await Promise.all([
					queryUserFlow(this.userInfo.username || 'admin'),
					queryCompletedTasks(this.userInfo.username || 'admin'),
					getApprovalStatistics(this.userInfo.username || 'admin')
				])
				
				// 处理待办任务数量
				if (pendingRes.code === 200 && pendingRes.data && Array.isArray(pendingRes.data)) {
					this.userInfo.todoCount = pendingRes.data.length
				} else {
					this.userInfo.todoCount = 0
				}
				
				// 处理已完成任务数量
				if (completedRes.code === 200 && completedRes.data && Array.isArray(completedRes.data)) {
					this.userInfo.completedCount = completedRes.data.length
					console.log('已完成审批历史数量:', this.userInfo.completedCount)
					console.log('已完成任务数据:', completedRes.data)
				} else {
					this.userInfo.completedCount = 0
					console.log('获取已完成任务失败:', completedRes)
				}
				
				// 处理统计数据
				if (statsRes.code === 200 && statsRes.data) {
					const statsData = statsRes.data
					this.userInfo.approvedCount = statsData.approvedCount || 0
					this.userInfo.rejectedCount = statsData.rejectedCount || 0
					console.log('审批统计数据:', statsData)
				}
				
				// 消息和通知数量暂时使用模拟数据
				// TODO: 接入真实的消息和通知API
				this.userInfo.messageCount = this.userInfo.messageCount || 0
				this.userInfo.notificationCount = this.userInfo.notificationCount || 0
				
			} catch (error) {
				console.error('加载统计数据失败:', error)
				// 出错时使用默认值
				this.userInfo.todoCount = 0
				this.userInfo.completedCount = 0
				this.userInfo.messageCount = 0
				this.userInfo.notificationCount = 0
			}
		},

		navigateTo(url) {
			uni.navigateTo({ url })
		},

		// 跳转到审批历史页面
		navigateToApprovalHistory() {
			uni.navigateTo({
				url: '/pages/approval/history'
			})
		},

		// 跳转到人脸注册页面
		faceRegister() {
			uni.navigateTo({
				url: '/pages/face-register/face-register'
			})
		},
		
		// 编辑资料
		editProfile() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
		},
		
		showToast(title) {
			uni.showToast({
				title,
				icon: 'none'
			})
		},
		
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						clearAuth()
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: 20rpx;
}

/* 用户信息卡片 */
.user-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.user-header {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx 30rpx;
	position: relative;
}

.avatar-container {
	position: relative;
	margin-right: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background: #fff;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-badge {
	position: absolute;
	bottom: 8rpx;
	right: 8rpx;
	background: #4CAF50;
	border-radius: 20rpx;
	padding: 4rpx 12rpx;
	border: 2rpx solid #fff;
}

.badge-text {
	font-size: 20rpx;
	color: #fff;
	font-weight: bold;
}

.user-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.name {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 8rpx;
}

.department {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 4rpx;
}

.email {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
}

.user-actions {
	display: flex;
	align-items: center;
}

.action-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10rpx);
}

.action-btn:active {
	background: rgba(255, 255, 255, 0.3);
}

.user-stats {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	padding: 20rpx 30rpx;
	backdrop-filter: blur(10rpx);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.stat-number {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 4rpx;
}

.stat-label {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.8);
}

.stat-divider {
	width: 1rpx;
	height: 40rpx;
	background: rgba(255, 255, 255, 0.3);
	margin: 0 20rpx;
}

/* 菜单区域 */
.menu-section {
	margin: 20rpx 30rpx;
}

.section-title {
	font-size: 26rpx;
	color: #999999;
	padding: 0 10rpx 20rpx;
}

.menu-list {
	background: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: #f5f7fa;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}



.menu-icon.logout {
	background: #ff6b6b;
}

.menu-icon.face {
	background: #667eea;
}

.menu-icon.history {
	background: #4CAF50;
}

.menu-text {
	font-size: 28rpx;
	color: #333333;
}

.menu-right {
	display: flex;
	align-items: center;
}

.menu-badge {
	min-width: 36rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	background: #ff4444;
	color: #ffffff;
	font-size: 20rpx;
	border-radius: 18rpx;
	padding: 0 8rpx;
	margin-right: 10rpx;
}
</style>

